<template>
	<view class="test-drive">
		<hwheader>
			<template v-slot:content>
				<text>智界 S7 预约试驾</text>
			</template>
		</hwheader>
		<view class="header-placeholder"></view>
		<view class="body">
			<view class="bg-img">
				<image src="https://res2.vmallres.com/pimages/uomcdn/CN/pms/202311/gbom/GB5008010010401/B146067400EC6EBFCA835FCDB93C582Dmp.jpg" mode="aspectFill"></image>
			</view>
		</view>
		<view class="footer">
			<view class="footer-hd">
				<text>欢迎预约</text>
			</view>
			<view class="footer-bd">
				<view class="carType">
					<view class="font">
						<text>意向车型</text>
					</view>
					<view class="select">
						<uni-data-select v-model="value"  :localdata="range" :clear="true">
						</uni-data-select>
					</view>

				</view>

			</view>
			<view class="footer-ft">
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const range = ref([
	{ value: 0, text: "智界 S7" }
]);
</script>

<style lang="scss">
.test-drive{
	height: 100vh;
	.header-placeholder{
		height: 100rpx;
	}
	.body {
		box-sizing: border-box;
		.bg-img{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50%;
		width: 100%;
		margin: 0 32rpx;
		.footer-hd{
			color: #fff;
			font-size: 48rpx;
			font-weight: bold;
			margin: 0 0 16rpx;
		}
		.footer-bd{
			.carType{
				display: flex;
				height: 96rpx;

				.font{
					color: #ffffff;
					font-size: 28rpx;
					text-align: center;	
					line-height: 96rpx;
				}
				.select{
					padding-left: 30rpx;
					width: 75%;
					line-height: 96rpx;
				}
			}
		}
		.footer-ft{
			
		}
	}
}
</style>
